<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型-行内非替换元素的特殊性(Box Model - Special Characteristics of Non Replacement Elements in Rows)</title>
  <!-- 
    CSS的盒子模型中，非替换元素（non-replaced elements）在行内（inline）布局中具有一些特殊特征。
    以下是关于非替换元素在行内布局中的特点总结： 
 
      1. 行内元素默认不接受宽度和高度设置：非替换的行内元素默认不接受设置宽度（width）和高度（height）属性，它们的宽度和高度由其内容决定。 
      2. 水平方向上的margin、padding和border属性会生效：虽然行内元素默认不接受宽度和高度设置，
         但是水平方向上的外边距（margin）、内边距（padding）和边框（border）属性会影响元素在水平方向上的布局。 
      3. 行内元素会在一行中水平排列：非替换的行内元素会在一行中水平排列，如果空间不够，元素会自动换行。 
      4. 行内元素间的空白会被忽略：行内元素之间的空白（空格、换行符等）会被浏览器忽略，不会影响元素之间的布局。 
      5. 行内元素的垂直对齐方式受line-height属性影响：行内元素的垂直对齐方式受到line-height属性的影响，可以通过设置line-height属性来控制元素的垂直对齐方式。 
   -->
   <style>
     .text {
       background-color: skyblue;

       /* 设置width/height无法生效 */
       width: 200px;
       height: 200px;

       /* 内边距: padding属性会生效 - 上下左右会被撑起来, 但不占据空间 */
       /* padding: 40px; */

       /* 外边距: margin属性左右会生效, 但上下无法生效 */
       margin: 50px;

       /* 边框: border属性会生效 - 上下左右会被撑起来, 但是不占据空间; 有padding-top 上边框不生效*/
       border: 60px solid rosybrown
     }
   </style>
</head>
<body>

  <span class="text">行内元素默认不接受宽度和高度设置</span>
  Special Characteristics of Non Replacement Elements in Rows
  <div>non-replaced elements</div>
  
</body>
</html>  